<template>
	<view>
		<view style="height: 30vh;width: 100%;background: #ECE2D7;">
			<view class="flex align-center justify-between padding-lg  padding-top-soft">
				<view class="flex  align-center  ">
					<u-avatar :src="avatarUrl" size="70"></u-avatar>
					<view class="flex flex-direction align-start margin-left-sm">
						<text class=" text-bold text-lg text-cut" style="width: 300rpx;">{{nickName}}</text>
						<text class="margin-top-xs">{{phone}}</text>
						<view class="margin-top-xs">
							<!-- 							<u-tag v-if="userInfo.isMember" text="棋牌室会员" plain size="mini" color="#CCAC82"
								borderColor="#CCAC82"></u-tag>
							<u-tag v-else text="普通客户" plain size="mini" color="#aaaaaa" borderColor="#aaaaaa"></u-tag> -->
						</view>
					</view>
				</view>
				<view @click="gotoUserInfo">
					<text class="text-black">个人资料</text>
					<text class="cuIcon-right text-black"></text>
				</view>
			</view>
			<view class="bg-white  topbox radius shadow-blur">
				<view style="display: grid;grid-template-columns: repeat(2,1fr);height: 240rpx;">
					<view class="topboxson radius" @click="jumpUrl(0)">
						<text class="text-bold text-white text-lg">账户充值</text>
						<image style="position: absolute;width: 140rpx;height: 140rpx;right: 10rpx;bottom: 20rpx;"
							src="http://n298651t63.zicp.vip:9001/image/file/20221024/bcff96e445a641bea39862d631def4e3_new.png">
						</image>
					</view>
					<view class="topboxson radius" @click="jumpUrl(1)">
						<text class="text-bold text-white text-lg">消费记录</text>
						<image style="position: absolute;width: 100rpx;height: 90rpx;right: 20rpx;bottom: 40rpx;"
							src="http://n298651t63.zicp.vip:9001/image/file/20221024/243d71236bf04eecac35a0ab1418f3ec_new.png">
						</image>
					</view>
				</view>
				<view class="margin-top-xl grid col-3">
					<view @click="jumpUrl(3)" class="flex flex-direction justify-center align-center">
						<text class="text-df cuIcon-vipcard" style="font-size: 40rpx;"></text>
						<text class="text-sm margin-top-xs">我的卡券</text>
					</view>
					<view @click="getWifi" class="flex flex-direction justify-center align-center">
						<text class="text-df cuIcon-wifi" style="font-size: 40rpx;"></text>
						<text class="text-sm margin-top-xs">WiFi直连</text>
					</view>
					<view @click="jumpUrl(4)" class="flex flex-direction justify-center align-center">
						<text class="text-df cuIcon-question" style="font-size: 40rpx;"></text>
						<text class="text-sm margin-top-xs">常见问题</text>
					</view>
				</view>
				<view class="margin-top-xl bg-white  padding-lg">
					<view @click="submitYiJian" class="flex align-center justify-between">
						<text>意见反馈</text>
						<text class="cuIcon-message text-lg" style="font-size: 36rpx;"></text>
					</view>
					<u-line dashed margin="20rpx 0 20rpx 0"></u-line>
					<view @click="submitJoinus" class="flex align-center justify-between">
						<text>合作加盟</text>
						<text class="cuIcon-link" style="font-size: 36rpx;"></text>
					</view>
				</view>
			</view>
		</view>

		<!-- WIFI信息 -->
		<u-modal :show="showWifi" :showConfirmButton="false" :closeOnClickOverlay="true" @close="showWifi=false">
			<view>
				<view v-show="WeiXinGroupCode">
					<view>
						<view class="flex justify-start">
							<text class="text-bold text-black text-lg">群二维码</text>
						</view>
						<image style="width: 100%;" :src="WeiXinGroupCode" class="margin-top-sm" mode="aspectFit">
						</image>
						<view class="margin-top-xs text-gray text-sm">扫描上方二维码，加群交流更方便！</view>
					</view>
					<u-line dashed margin="20rpx 0 20rpx 0" st></u-line>
				</view>
				<view class="flex justify-start">
					<text class="text-bold text-black text-lg">门店WiFi</text>
				</view>
				<view class="margin-top-sm">
					<view class="flex align-center justify-start">
						<text class="text-lg ">WiFi账号：</text>
						<text class="text-lg ">MERCURY_F0A8</text>
					</view>
					<view class="margin-top-xs flex align-center justify-start">
						<text class="text-lg">WiFi密码：</text>
						<text class="text-lg">santi123</text>
					</view>
				</view>
				<view class="margin-top-lg flex align-center justify-between">
					<button @click="copyWifiPwd" class="cu-btn line-gray  margin-right-xs lg">复制密码</button>
					<button @click="content_wf" class="cu-btn bg-blue margin-left-xs lg">一键连接</button>
				</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import {
		url
	} from '../../../request/api_user';
	import {
		Loginorot
	} from '@/request/wx.js';
	export default {
		name: 'UserCenter',
		data() {
			return {
				avatarUrl: '',
				nickName: '',
				phone: '',
				isMember: false,
				showWifi: false,
				wifiInfo: {
					Name: '',
					PassWord: '',
				},
				WeiXinGroupCode: '',
			}
		},
		onShow() {
			Loginorot()
			this.init()
		},
		onLoad() {

		},
		methods: {
			copyWifiPwd() {
				this.showWifi = false;
				uni.setClipboardData({
					data: this.wifiInfo.PassWord,
					success: function() {
						uni.showToast({
							icon: 'none',
							title: '复制成功'
						})
					}
				});
			},
			//获取WIFi
			getWifi() {
				 uni.authorize({
				      scope: 'scope.userLocation',
				      success: () => {
				        // 用户授权成功后，开始连接WiFi
				        this.showWifi = true;
				      },
				      fail: () => {
				        wx.showToast({
				          title: '授权失败',
				          icon: 'none'
				        });
				      }
				    });
				//uni.showLoading();
				
				// uni.$u.http.post('/Main/GetWifi').then(res => {
				// 	this.wifiInfo = JSON.parse(res.data);
				// 	this.showWifi = true;
				// })

			},
			//意见反馈
			submitYiJian() {
				uni.navigateTo({
					url: '/pages/user/feedback'
				})
			},
			//合作加盟
			submitJoinus() {
				uni.navigateTo({
					url: '/pages/user/layout/joinus'
				})
			},
			init() {
				let vm = uni.getStorageSync('UserInfo');
				this.avatarUrl = url() + vm.avatarUrl,
					this.nickName = vm.nickname,
					this.phone = vm.phone
			},
			gotoUserInfo() {
				uni.navigateTo({
					url: '/pages/user/user/userinfo'
				})

			},
			jumpUrl(e) {
				// 判断是否是会员
				// if (!this.userInfo.isMember) {
				// 	uni.navigateTo({
				// 		url: '/pagesA/member/introduce'
				// 	})
				// 	return;
				// }
				//跳转到储值卡充值页面
				let url = '/pages/user/member/storedcard';
				switch (e) {
					case 1:
						//跳转到我的会员卡
						url = '/pages/user/member/mymember';
						break;
					case 2:

						break;
					case 3:
						url = '/pages/user/user/mypackage';
						break;
					case 4:
						url = '/pages/user/layout/commonproblem';
						break;
				}
				uni.navigateTo({
					url: url
				})
			},
			content_wf() {
				this.showWifi = false;
				const that = this;
				uni.getSystemInfo({
					success: (res) => {
						console.log(res)
						const getSystemVersion = (platform) => {
							const match = platform.match(/\d+(?:\.\d+)*/);
							return match ? parseFloat(match[0]) : 0;
						};
						const systemVersion = res.platform === 'android' ? getSystemVersion(res.model) :
							getSystemVersion(res.system);
						if ((res.platform === 'android' && systemVersion < 6) || (res.platform === 'ios' &&
								systemVersion < 11.2)) {
							uni.showToast({
								title: '手机版本不支持',
								icon: 'none'
							});
							return;
						}
						that.start_wifi();
					},
					fail: (error) => {
						console.error('获取系统信息失败:', error);
					}
				});
			},
			start_wifi() {
				let that = this
				uni.startWifi({
					success: (res) => {
						console.log(res)
						that.connected()
					},
					fail: (error) => {
						uni.showToast({
							title: "连接失败",
							icon: 'none'
						})
					}
				})
			},
			connected() {
				
				let that = this
				uni.showLoading({
					title: '连接中...'
				})
				uni.connectWifi({
					SSID: "MERCURY_F0A8",
					password: "santi123",
					success: (res) => {
						console.log(res)
						uni.hideLoading();
						uni.showToast({
							title: "连接成功",
							icon: 'none'
						})
					},
					fail: (error) => {
						console.log(error)
						uni.hideLoading();
						uni.showToast({
							title: '连接失败',
							icon: 'none'
						})
					}

				})
			}
		}
	}
</script>

<style scoped>
	.topbox {
		position: fixed;
		top: 328rpx;
		height: 400rpx;
		width: 94%;
		left: 3%;
		/* box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1) */
	}

	.topboxson {
		margin: 20rpx;
		background: #CCAC82;
		height: 100%;
		padding: 20rpx;
		position: relative;
	}

	.bg {
		background: #eee;
		height: 100vh;
		padding-left: 20rpx;
		display: flex;
		align-items: center;
		flex-direction: column;
	}

	.padding-top-soft {
		padding-top: 158rpx;
	}
</style>